<template>
	<view class="u-page">
		<up-navbar title="表单" @leftClick="navigateBack" safeAreaInsetTop fixed placeholder></up-navbar>
		<view class="u-demo-block">
			<text class="u-demo-block__title">基础使用</text>
			<view class="u-demo-block__content">
				<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
				<up-form labelPosition="left" :model="detail" ref="form1">
					<up-form-item label="SKU" borderBottom ref="item1">
						<up-input v-model="detail.skuCode" border="none" readonly></up-input>
					</up-form-item>
					<up-form-item label="名称" v-if="detail.itemName" borderBottom>
						<up-input v-model="detail.itemName" border="none" readonly></up-input>
					</up-form-item>
					<up-form-item label="别名" v-if="detail.itemAlias" borderBottom>
						<up-input v-model="detail.itemAlias" border="none" readonly></up-input>
					</up-form-item>
					<up-form-item label="品牌" borderBottom>
						<up-input v-model="detail.itemBrand" border="none" readonly></up-input>
					</up-form-item>
					<up-form-item label="尺码" borderBottom>
						<up-input v-model="detail.itemSize" border="none" readonly></up-input>
					</up-form-item>
					<up-form-item label="成本" borderBottom>
						<up-input v-model="detail.itemPrice" border="none" readonly></up-input>
					</up-form-item>
					<up-form-item label="售价" prop="salesPrice" borderBottom>
						<up-input v-model="detail.salesPrice" placeholder="请填写售价" border="surround"></up-input>
					</up-form-item>
					<up-form-item label="利润" borderBottom>
						<up-input v-model="subtraction" border="none" readonly></up-input>
					</up-form-item>
					<up-form-item label="单号" borderBottom  prop="sentExpressNo">
						<up-input v-model="detail.sentExpressNo" border="surround" ></up-input>
						<template #right>
							<up-icon name="scan" size="25" @click="scanCode"></up-icon>
						</template>
					</up-form-item>
				</up-form>
				<up-button type="primary" text="提交" customStyle="margin-top: 50px" @click="submit"></up-button>
				<up-button type="error" text="重置" customStyle="margin-top: 10px" @click="reset"></up-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getSalesById,
		salesOrder
	} from "@/api/work/sales/sales.js";
	export default {
		data() {
			return {
				detail: {
					salesPrice: '',
					sentExpressNo: ''
				},
				form: {
					id: '',
					salesPrice: '',
					itemPrice: '',
					sentExpressNo: '',
				},
				fileList1: [],
				disabled1: false,
				tips: '',
				value: '',
				rules: {
					salesPrice: {
						required: true,
						type: 'number',
						message: '请填写售价',
						trigger: ['blur', 'change']
					},
				}
			}
		},
		onLoad(event) {
			this.getDetail(event.id)
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form1.setRules(this.rules)
		},
		computed: {
			subtraction() {
				return !this.detail.salesPrice ? 0 : (this.detail.salesPrice - this.detail.itemPrice).toFixed(2);
			}
		},
		methods: {
			scanCode() {
				const _self = this
				// 允许从相机和相册扫码
				uni.scanCode({
					success: function(res) {
						if(res.result){
							_self.detail.sentExpressNo = res.result
						}
					}
				});
			},
			getDetail(id) {
				getSalesById(id).then(response => {
					this.detail = response.data
				})
			},
			afterRead(event) {
				this.fileList1.push({
					url: event.file,
					status: 'uploading',
					message: '上传中'
				})
			},
			navigateBack() {
				uni.navigateBack()
			},

			formatter(day) {
				const d = new Date()
				let month = d.getMonth() + 1
				const date = d.getDate()
				if (day.month == month && day.day == date + 3) {
					day.bottomInfo = '有优惠'
					day.dot = true
				}
				return day
			},

			codeChange(text) {
				this.tips = text;
			},
			submit() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form1.validate().then(res => {
					this.form.id = this.detail.id
					this.form.salesPrice = this.detail.salesPrice
					this.form.itemPrice = this.detail.itemPrice
					this.form.sentExpressNo = this.detail.sentExpressNo
					salesOrder(this.form).then(response => {
						if (response.code == 200) {
							uni.$u.toast('修改成功')
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/sales/index'
								})
							}, 500);
						}
					})
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			reset() {
				const validateList = [salesPrice]
				this.$refs.form1.resetFields()
				this.$refs.form1.clearValidate()
				setTimeout(() => {
					this.$refs.form1.clearValidate(validateList)
					// 或者使用 this.$refs.form1.clearValidate()
				}, 10)
			},
			hideKeyboard() {
				uni.hideKeyboard()
			}
		}
	}
</script>

<style lang="scss">

</style>